<template>
  <div class="layout-edit">
    <!--此处的事件实现点击左侧不失焦-->
    <!-- <div class="le-r-set" @mousedown="() => { $refs.vViewBox.onActive() }"> -->
    <div class="le-r-set">
      <SetItems/>
    </div>
    <div class="le-edit-box" :style="{height: editBoxHeight ? editBoxHeight + 'px': 'auto', top: editBoxTop + 'px'}">
      <ViewBox ref="vViewBox"/>
    </div>
    <ViewBoxPreview/>
  </div>
</template>

<script>
import ViewBoxPreview from '@/view/indexPreview'
import ViewBox from '@/view/indexEdit'
// import ViewBox from '@/view/export-img/index' // 测试导图
import SetItems from '@/view/SetItems'
import ajaxApi from '@/view/ajax-api'
import dataApi from '@/view/v/data-api'
import dataApiEdit from '@/view/data-api-edit'
import getUrlSearch from '@/modules/corejs/url/get-url-search'
import coreDataCompatible from '@/view/v/core-data-compatible.js'
export default {
  components: {
    ViewBox,
    ViewBoxPreview,
    SetItems
  },
  data () {
    return {
      headerHeight: 80 + 56,
      editBoxHeight: 0,
      editBoxHeightExtra: 0,
      editBoxTop: 0
    }
  },
  computed: {
    zIndexMax () {
      return dataApiEdit.zIndexMax
    }
  },
  created () {
    let id = getUrlSearch('id')
    if (id && id !== '0') {
      // 编辑状态
      ajaxApi.getData(id).then(d => {
        dataApi.core = coreDataCompatible(JSON.parse(d.templateUrl))
      })
    }
  },
  mounted () {
    this.updateBoxHeight()
    this.updateBoxTop()
    window.addEventListener('resize', this.updateBoxHeight)
    window.addEventListener('scroll', this.updateBoxTop)
  },
  methods: {
    updateBoxHeight () {
      this.editBoxHeight = window.innerHeight - 138 + this.editBoxHeightExtra - 2 // - this.editBoxHeightExtra - 20
    },
    updateBoxTop () {
      let { headerHeight } = this
      let { pageYOffset } = window
      let top
      let editBoxHeightExtra = pageYOffset // 高度处理
      if (pageYOffset < headerHeight) {
        top = 0
      } else {
        top = pageYOffset - headerHeight
        editBoxHeightExtra = headerHeight // 高度处理
      }
      if (top < 0) {
        top = 0
      }
      this.editBoxTop = top

      // 高度处理
      this.editBoxHeightExtra = editBoxHeightExtra
      this.updateBoxHeight()
    }
  },
  destroyed () {
    window.removeEventListener('resize', this.updateBoxHeight)
    window.removeEventListener('scroll', this.updateBoxTop)
  }
}
</script>

<style scoped>
.layout-edit >>>{
  a {
    color: #25a2c7;
    &:active {
      color: red;
    }
  }
}
.le-bar {
  height: 100px;
  background-color: #ddd;
}
.le-main {
}
.le-r-set {
  float: right;
  width: 220px;
  border: 1px solid #ddd;
}
.le-edit-box {
  background-color: #eee;
  /* height: 100px; */
  /* position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 240px; */
  margin-right: 225px;
  overflow: auto;
  border: 1px solid #aaa;
  position: relative;
}
.l-preview {
  position:fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  background-color: #aaa;
  /* z-index: 0; */
  /* .close-btn {
    z-index: 99;
  } */
}
</style>
